// 在'react-router-dom' V6 中用Routes代替了Switch的作用  新特性具体见下连接
// https://blog.csdn.net/weixin_40906515/article/details/104957712
// import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "antd/dist/antd.less"; // or 'antd/dist/antd.less'
// import { BrowserRouter, Route } from 'react-router-dom'

import React from "react";
// import routers from './router/router'
import Login from "./pages/Login";
import Admin from "./pages/Admin";

// 类组件的写法
// export default class App extends Component {
//   formRef: RefObject<FormInstance>
//   constructor(props: any) {
//     super(props)
//     this.formRef = createRef<FormInstance>()
//   }
//   render() {
//     return (
//       <div>
//         <DatePicker />
//       </div>
//     )
//   }
// }
// -----------------------------------------
// React hooks 写法 + TypeScript类型验证
// interface UserInfo {
//   name?: string
//   age?: number
// }

// const App: React.FC<UserInfo> = (props: UserInfo) => {
//   // console.log(props);
//   return (
//     <div>
//       <DatePicker />
//       <Cal />
//     </div>
//   )
// }

// interface router {
//   path: string,
//   component: any,
//   children?: Array<router>
// }

const App: React.FC = () => {
  return (
    <BrowserRouter>
      {/* <li><Link to="/login">login</Link></li>
      <li><Link to="/admin">admin</Link></li> */}
      {/* Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的Router之内 */}
      {/* 路由 -  react-router-dom V6中没有switch*/}
      <Routes>
        {" "}
        {/* 只能匹配其中的一个 */}
        <Route path="login" element={<Login />}></Route>
        {/* 如果这个路由还有下一层的路由存在就必须写成/admin/* 不能单独写/admin,否则下层路由会匹配不到 */}
        <Route path="admin/*" element={<Admin />}></Route>
        {/* 页面的跳转,匹配不到login和admin就默认跳转到/login,如果有登录信息就再次跳转到/admin，如果没有用户登录信息就要求登录再跳转 */}
        <Route path="*" element={<Login />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;
